<template>
  <div class="app-container">
    <div class="hor mg-b-10">
      <div class="hor mg-b-10 ver-center flex1">
        <div class="hor pd-l-10">
          <el-select v-model="choiceFenLei" placeholder="请选择类型" clearable filterable @change="onClickSearch">
            <el-option
              v-for="item in fenLeiList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="hor pd-l-10">
          <el-input class="" v-model="name" placeholder="请输入名称" clearable></el-input>
        </div>
        <div class="hor pd-l-10">
          <el-input class="" v-model="modelCode" placeholder="请输入型号" clearable></el-input>
        </div>
        <div class="pd-l-10"></div>
        <el-button type="primary" icon="el-icon-search" @click="onClickSearch()" class="">筛选
        </el-button>
      </div>

      <div class="">
        <el-button type="primary" icon="el-icon-plus" size="mini" class="mg-l-10" v-has-permission="['全系清单编辑、新增、删除']"
                   @click="onClickAdd()">增加
        </el-button>
      </div>
      <div class="">
        <el-upload
          action="#"
          slot="reference"
          class=""
          :auto-upload="false"
          :on-change="requestImport"
          :multiple="false"
          :show-file-list="false">
          <div class="hor ver-center match-width">
            <el-tooltip class="" effect="light" content="若已上传全系清单，再次上传会空原来的清单内容" placement="right-start">
              <el-button type="primary" icon="el-icon-upload2" :loading="onSaveLoading" v-has-permission="['全系清单上传']"
                         class="mg-l-10">
                上传全系清单
              </el-button>
            </el-tooltip>
          </div>
        </el-upload>
      </div>
      <div class="">
        <el-button type="primary" icon="el-icon-download" size="mini" class="mg-l-10"
                   @click="requestExport">下载全系清单
        </el-button>
      </div>

    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="allList"
      element-loading-text="Loading"
      @cell-click="onCellClick"
      @selection-change="handleSelectionChange"
      @row-click="onItemClick"
      @row-dblclick="onItemDoubleClick"
      :max-height="autoHeight"
      border
      fit
      highlight-current-row
    >

      <el-table-column label="分类" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.fenLeiName }}
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" width="">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="型号" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.modelCode }}
        </template>
      </el-table-column>
      <el-table-column label="工作内容" width="500" align="">
        <template slot-scope="scope">
          {{ scope.row.gongZuoNeiRong }}
        </template>
      </el-table-column>
      <el-table-column label="单位" width="60" align="center">
        <template slot-scope="scope">
          {{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column label="分析分类" width="" align="center">
        <template slot-scope="scope">
          {{ scope.row.fenXiFenLei }}
        </template>
      </el-table-column>
      <el-table-column label="工程量" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.gongChengLiang }}
        </template>
      </el-table-column>
      <!--      <el-table-column label="人工费" width="100" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.renGongCost }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="主材费" width="100" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.zhuCaiCost }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="辅材及其他材料费" width="100" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.fuCaiCost }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="机械费" width="100" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.jiXieCost }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="企业管理费" width="100" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.qiYeCost }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="税金" width="" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.shuiJin }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="综合单价" width="" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.comprehensivePrice }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="合价" width="" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.totalPrice }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column class-name="status-col" label="操作" align="center" width="140">
        <template slot-scope="scope">
          <div class="hor ver-center">
            <el-button type="info" class="" size="mini" v-has-permission="['全系清单编辑、新增、删除']"
                       @click.stop="onClickView(scope.row)">编辑
            </el-button>
            <el-button type="danger" class="" size="mini" :loading="onDeleteLoading" v-has-permission="['全系清单编辑、新增、删除']"
                       @click.stop="onDeleteId=scope.row.id; onDeleteShow = true ">删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="hor">
      <div class="flex1"></div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="mg-t-10">
      </el-pagination>
    </div>
    <el-dialog
      title="编辑全系清单信息"
      :visible.sync="infoDialogShow"
      :close-on-click-modal=false
      width="700px"
      @open="onDialogOpen"
      center>
      <div class="ver match-width">
        <div class="ver">
          <div class="hor ver-center mg-t-20">
            <div style="width: 80px;" class="font14 font-text-color-main-title">分类</div>
            <el-select v-model="allTabulation.fenLei" placeholder="请选分类"
                       style="width: 225px" clearable filterable>
              <el-option
                v-for="item in fenLeiList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div class="mg-lr-20"></div>
            <div style="width: 80px;" class="font14 font-text-color-main-title">名称</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                      v-model="allTabulation.name">
            </el-input>
          </div>
          <div class="hor ver-center mg-t-20">
            <div style="width: 80px;" class="font14 font-text-color-main-title">型号</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                      v-model="allTabulation.modelCode">
            </el-input>
            <div class="mg-lr-20"></div>
            <div style="width: 80px;" class="font14 font-text-color-main-title">单位</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                      v-model="allTabulation.unit">
            </el-input>
            <!--            <el-select class="flex1 font-text-color-main-title" v-model="allTabulation.unit"-->
            <!--                       style="width: 225px" clearable placeholder="请选择单位">-->
            <!--              <el-option-->
            <!--                label="系统"-->
            <!--                value="系统">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="根"-->
            <!--                value="根">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="只"-->
            <!--                value="只">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="台"-->
            <!--                value="台">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="个"-->
            <!--                value="个">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="项"-->
            <!--                value="项">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="座"-->
            <!--                value="座">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="t"-->
            <!--                value="t">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="m"-->
            <!--                value="m">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="㎡"-->
            <!--                value="㎡">-->
            <!--              </el-option>-->
            <!--              <el-option-->
            <!--                label="m³"-->
            <!--                value="m³">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </div>
          <div class="hor ver-center mg-t-20">
            <div style="width: 80px;" class="font14 font-text-color-main-title">分析分类</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                      v-model="allTabulation.fenXiFenLei">
            </el-input>
            <div class="mg-lr-20"></div>
            <div style="width: 80px;" class="font14 font-text-color-main-title">工程量</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.gongChengLiang">
            </el-input>
          </div>
          <div class="hor ver-center mg-t-20">
            <div style="width: 80px;" class="font14 font-text-color-main-title">人工费</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.renGongCost">
            </el-input>
            <div class="mg-lr-20"></div>
            <div style="width: 80px;" class="font14 font-text-color-main-title">主材费</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.zhuCaiCost">
            </el-input>
          </div>
          <div class="hor ver-center mg-t-20">
            <div style="width: 80px;" class="font14 font-text-color-main-title">辅材及其他材料费</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.fuCaiCost">
            </el-input>
            <div class="mg-lr-20"></div>
            <div style="width: 80px;" class="font14 font-text-color-main-title">机械费</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.jiXieCost">
            </el-input>
          </div>
          <div class="hor ver-center mg-t-20">
            <div style="width: 80px;" class="font14 font-text-color-main-title">企业管理费</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.qiYeCost">
            </el-input>
            <div class="mg-lr-20"></div>
            <div style="width: 80px;" class="font14 font-text-color-main-title">税金</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.shuiJin">
            </el-input>
          </div>
          <div class="hor ver-center mg-t-20">
            <div style="width: 80px;" class="font14 font-text-color-main-title">综合单价</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.comprehensivePrice">
            </el-input>
            <div class="mg-lr-20"></div>
            <div style="width: 80px;" class="font14 font-text-color-main-title">合价</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                      v-model="allTabulation.totalPrice">
            </el-input>
          </div>
          <div class="hor ver-center mg-t-20">
            <div style="width: 80px;" class="font14 font-text-color-main-title">工作内容</div>
            <el-input class="flex1 font-text-color-main-title" type="textarea" maxlength="512"
                      :autosize="{minRows: 3, }"
                      v-model="allTabulation.gongZuoNeiRong" placeholder="请输入"/>
          </div>
          <!--          <div class="hor ver-center mg-t-20">-->
          <!--            <div class="hor ver-center flex1">-->
          <!--              <div style="width: 80px;" class="font14 font-text-color-main-title">备注-->
          <!--              </div>-->
          <!--              <el-input class="flex1 font-text-color-main-title"  type="textarea" maxlength="512"-->
          <!--                        :autosize="{minRows: 3, }"-->
          <!--                        v-model="allTabulation.remarks" placeholder="请输入"/>-->
          <!--            </div>-->
          <!--          </div>-->

        </div>

        <div class="hor match-width ver-center hor-center mg-t-20">
          <el-button @click="infoDialogShow = false">取 消</el-button>
          <el-button type="primary" slot="reference" :loading="onSaveLoading" class="mg-l-10"
                     @click="onClickSave">保存
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="onDeleteDialogShow"
      :close-on-click-modal=false
      width="30%">
      <span>删除后无法恢复</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onDeleteDialogShow = false">取消</el-button>
        <el-button type="danger" @click="batchDelete()" :loading="onDeleteLoading">删除</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="onDeleteShow"
      :close-on-click-modal=false
      width="30%">
      <span>删除后无法恢复</span>
      <span slot="footer" class="dialog-footer">
                    <el-button @click="onDeleteShow = false">取消</el-button>
                    <el-button type="danger" @click="deleteById"
                               :loading="onDeleteLoading">删除</el-button>
                  </span>
    </el-dialog>

  </div>

</template>
<style>
</style>
<script>
const request = require('@/api/project/supplyCompany')
const requestAllTabulation = require('@/api/tabulation/allTabulation')

let _this;
export default {
  components: {},
  data() {
    return {
      allList: null,
      page: 1,
      size: 20,
      total: 0,
      autoHeight: 600,//根据屏幕高度自动计算的高度
      //筛选参数
      params: {
        flag: 1,
      },
      time: "",
      orgBillModelId: null,
      shareProfitShow: false,
      billModelList: [],
      privacyPhoneValue: false,
      filterLevel: '',
      selectRowList: [],
      onDeleteDialogShow: false,
      onDeleteLoading: false,
      onDeleteShow: false,
      onDeleteId: "",
      //信息窗口
      infoDialogShow: false,
      allTabulation: {
        id: null,
        name: null,
        fenLei: null,
        modelCode: null,
        gongZuoNeiRong: null,
        unit: null,
        fenXiFenLei: null,
        gongChengLiang: null,
        renGongCost: null,
        zhuCaiCost: null,
        fuCaiCost: null,
        jiXieCost: null,
        qiYeCost: null,
        shuiJin: null,
        comprehensivePrice: null,
        totalPrice: null,
      },

      onSaveLoading: false,
      listLoading: false,
      choiceFenLei: null,
      name: null,
      modelCode: null,
      fenLeiList: [
        {
          value: 1,
          label: '直流屏'
        },
        {
          value: 2,
          label: '高压开关柜'
        },
        {
          value: 3,
          label: '低压开关柜'
        },
        {
          value: 4,
          label: '母线槽'
        },
        {
          value: 5,
          label: '变压器'
        },
        {
          value: 6,
          label: '10kv高压电缆'
        },
        {
          value: 7,
          label: '架空线'
        },
        {
          value: 8,
          label: '低压电缆'
        },
        {
          value: 9,
          label: '预分支电缆'
        },
        {
          value: 10,
          label: '电表箱'
        },
        {
          value: 11,
          label: '配电箱'
        },
        {
          value: 12,
          label: '电表'
        },
        {
          value: 13,
          label: '高压桥架'
        },
        {
          value: 14,
          label: '调试'
        },
        {
          value: 15,
          label: '电缆通道'
        },
        {
          value: 16,
          label: '电杆'
        },
        {
          value: 17,
          label: '手续费'
        },
        {
          value: 18,
          label: '措施费'
        },
        {
          value: 19,
          label: '其他'
        }
      ],
    }
  },
  beforeMount() {
    this.autoHeight = document.body.scrollHeight - 220
  },
  mounted() {
    _this = this
    this.fetchData()
  },
  created() {

  },
  methods: {
    requestImport(file) {
      //上传文档导入
      this.onSaveLoading = true;
      _this.$message({
        message: '上传中，分析时间可能比较久，请耐心等待',
        type: 'warning'
      })
      const data = new FormData();
      data.append('file', file.raw);
      requestAllTabulation.importQxqd(data, function (percent) {
        console.log(percent)
      }).then(response => {
        _this.onSaveLoading = false;
        _this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.onSaveLoading = false;
        _this.fetchData()
      }).catch((e) => {
        this.onSaveLoading = false;
      })
    },
    fetchData() {
      this.listLoading = true
      const data = new FormData()
      for (var key in this.params) {//直接去除掉空值的对象
        if (this.isEmpty(this.params[key])) {
          delete this.params[key]
        }
      }
      this.params['name_ne'] =  ['']
      data.append('params', JSON.stringify(this.params))
      data.append('page', this.page)
      data.append('size', this.size)

      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestAllTabulation.getList(data).then(response => {
        this.allList = response.data
        this.total = response.totalElements

        this.listLoading = false
      })
    },
    deleteById() {
      //通过id删除
      this.$message({
        message: '操作中',
        type: 'warning',
        duration: 1000
      })
      this.onDeleteLoading = true
      const data = new FormData()
      data.append('ids', [this.onDeleteId])
      requestAllTabulation.batchDelete(data).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 3000
        })
        this.onDeleteLoading = false
        this.onDeleteShow = false
        _this.fetchData()
      }).catch((e) => {
        this.onDeleteLoading = false
      })
    },
    batchDelete() {
      const _this = this
      if (this.selectRowList == null || this.selectRowList.length == 0) {
        this.$message({
          message: '请选择对象',
          type: 'warning',
          duration: 1000
        })
        return
      }
      const array = []
      for (let i = 0; i < this.selectRowList.length; i++) {
        array.push(this.selectRowList[i].id)
      }
      const data = new FormData()
      data.append('ids', array)
      this.$message({
        message: '操作中',
        type: 'warning',
        duration: 1000
      })
      this.onDeleteLoading = true
      requestAllTabulation.batchDelete(data).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 3000
        })
        this.onDeleteLoading = false
        this.onDeleteDialogShow = false
        _this.fetchData()
      }).catch((e) => {
        this.onDeleteLoading = false
      })
    },
    handleSizeChange(val) {
      this.size = val
      this.fetchData()
    }, handleCurrentChange(val) {
      this.page = val
      this.fetchData()
    }, handleSelectionChange(rowList) {//多选变化监听
      this.selectRowList = rowList
    }, onCellClick(row, column, cell, event) {
      if (column.type == 'selection') {
        this.$refs.table.toggleRowSelection(row)
      }
    },
    onItemClick(row) {//单行点击
    },
    onItemDoubleClick(row) {//单行双击
      this.onClickView(row)
    },
    onClickAdd() {
      this.allTabulation = {}
      this.infoDialogShow = true
    },
    requestExport() {
      window.open(process.env.VUE_APP_BASE_API + "/mgt/allTabulation/exportQxqd")
    },
    onDialogOpen() {

    },
    onClickSave() {//点击保存
      if (this.allTabulation.name == null || this.allTabulation.name === "") {
        this.$message({
          message: '名称不能为空',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.requestSave()
    },
    onClickView(row) {
      this.allTabulation = JSON.parse(JSON.stringify(row))
      this.infoDialogShow = true
    },
    requestSave() {
      this.onSaveLoading = true
      //把选择的权限赋值过去
      const data = new FormData()
      requestAllTabulation.saveByJson(this.allTabulation).then(response => {
        this.onSaveLoading = false
        this.infoDialogShow = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.fetchData()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },

    onClickSearch() {//点击搜索
      this.page = 1;
      if (!this.isEmpty(this.searchName)) {
        this.params['name_like'] = ('%' + this.searchName.trim() + '%')
      } else {
        this.params['name_like'] = ''
      }
      if (!this.isEmpty(this.searchType)) {
        this.params['type_like'] = ('%' + this.searchType.trim() + '%')
      } else {
        this.params['type_like'] = ''
      }

      if (!this.isEmpty(this.choiceFenLei)) {
        this.params['fenLei'] = this.choiceFenLei
      } else {
        this.params['fenLei'] = ''
      }
      if (!this.isEmpty(this.name)) {
        this.params['name_like'] = ('%' + this.name.trim() + '%')
      } else {
        this.params['name_like'] = ''
      }
      if (!this.isEmpty(this.modelCode)) {
        this.params['modelCode_like'] = ('%' + this.modelCode.trim() + '%')
      } else {
        this.params['modelCode_like'] = ''
      }

      this.fetchData()
    },

  }
}
</script>
<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 400px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

/*清除type=number的上下箭头*/
/* 在Chrome浏览器下 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* 在Firefox浏览器下 */
input[type="number"] {
  -moz-appearance: textfield;
}

.my-number .el-input .el-input__inner {
  text-align: left;
}
</style>
